import React, { useState } from 'react'
import { useEffect } from 'react';
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'


import './App.css'
import { nanoid } from 'nanoid';

export default function App(){
  //第一步：状态提升，把数据放在最外层父组件APP中，
  /* 
  useState:
    - 让函数式组件支持state状态
    - useState() 方法里面唯一的参数就是初始 state
    - useState返回一个只有两个元素的数组
      - 第一个元素是当前的 state 的值
      - 第二个元素是一个函数,用来替换原来state中的值,这个函数的修改state和setState一样是异步的
    - React 会在重复渲染时记住它当前state的值，并且提供最新的值给我们的函数
*/
  const [todoList,setTodoList]=useState([
    {id:nanoid(),todo:'唱',done:false},
    {id:nanoid(),todo:'跳',done:false},
    {id:nanoid(),todo:'rap',done:false}
  ])
return (<div className="todo-container">
    <div className="todo-wrap">
       {/* 第三步，把数据和修改数据的函数传给header中，用户输入时进行修改 */}
      <Header todoList={todoList} setTodoList={setTodoList} />
      {/* 第二步，把数据传给list中展示 */}
      <List todoList={todoList} setTodoList={setTodoList}/>
      <Footer todoList={todoList} setTodoList={setTodoList}/>
    </div>
  </div>)}